<!-- 域名告警 -->
<template>
  <div class="dashboard-editor-container">
    <el-row style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px">
      <div class="btn topSubmitBtn" style="width:600px;">
        <el-button type="primary" @click="submit()">保存设置</el-button>
      </div>
      <div class="table">
        <el-table 
          border 
          :data="tableData" 
          style="width: 100%; margin: 15px 0" 
          row-key="SubClass"  
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
          <!-- <el-table-column prop="MainClass" label="主分类"></el-table-column>  default-expand-all    -->
          <el-table-column prop="SubClass" label="分类"></el-table-column>
          <el-table-column label="形成事件" width="300">
            <template slot-scope="scope"> 
              <el-switch v-model="scope.row.CreateEvent" v-if="scope.row.MainClass !== '根节点'" @change="switchChange(scope.row)" active-text="是" inactive-text="否"></el-switch>
              <!-- <el-switch v-model="scope.row.CreateEvent" v-if="scope.row.MainClass === '根节点'" @change="switchChange(scope.row)" active-text="全选" inactive-text="全不选"></el-switch> -->
              <el-radio v-model="scope.row.radio" label="1" v-if="scope.row.MainClass === '根节点'" @change="radioChange(scope.row)">全选</el-radio>
              <el-radio v-model="scope.row.radio" label="2" v-if="scope.row.MainClass === '根节点'" @change="radioChange(scope.row)">全不选</el-radio>
              <el-radio disabled v-model="scope.row.radio" label="3" v-if="scope.row.MainClass === '根节点'" @change="radioChange(scope.row)">部分选择</el-radio>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-row>
  </div>
</template>

<script>
import { connrequest } from '@/api/firstPage'
export default {
  data() {
    return {
      value1:'',
      tableData: []
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getData()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    async getData() {
      const res = await connrequest('GetParamDictURL')
      let arr = []
      res.Data = res.Data || []
      res.data = res.Data.map(item => {
        item.CreateEvent = item.CreateEvent === 1 ? true : false;
        arr.push(item.MainClass)
      })
      arr = Array.from(new Set(arr))
      // 给原数组加根节点
      arr.map(item => {
        res.Data.push({ClassID: 0, MainID: 0, MainClass: "根节点", SubClass: item, CreateEvent: false, radio: "1"})
      })
      this.tableData = this.treeing(res.Data)
      this.switchChange()
    },
    treeing(arr) {
      let res = [] // 存放结果集
      let map = {}
      // 判断对象是否有某个属性
      let getHasOwnProperty = (obj, property) => Object.prototype.hasOwnProperty.call(obj, property)
      // 边做map存储，边找对应关系
      for (const i of arr) {
        map[i.SubClass] = {
            ...i,
            children: getHasOwnProperty(map, i.SubClass) ? map[i.SubClass].children : []
        }
        const newItem = map[i.SubClass]
        if (i.MainClass === '根节点') {
          res.push(newItem)
        } else {
          if (!getHasOwnProperty(map, i.MainClass)) {
            map[i.MainClass] = {
              children: []
            }
          }
          map[i.MainClass].children.push(newItem)
        }
      }
      return res
    },
    switchChange(){
      this.tableData.map(item => {
        let alltrue = item.children.every(newitem => {
          return newitem.CreateEvent === true
        })
        let allfalse = item.children.every(newitem => {
          return newitem.CreateEvent === false
        })
        if(alltrue){
          item.radio = '1'
        }else if(allfalse){
          item.radio = '2'
        }else{
          item.radio = '3'
        }
        return item
      })
    },
    radioChange(row){
      if(row.radio === '1'){
        row.children.map(newitem => {
          return newitem.CreateEvent = true
        })
      }
      else if(row.radio === '2'){
        row.children.map(newitem => {
          return newitem.CreateEvent = false
        })
      }
    },
    async submit(){
      let newarr = this.flatten(this.tableData)
      newarr = newarr.filter(item => {
        item.CreateEvent = item.CreateEvent === true ? 1 : 0
        return item.MainClass !== '根节点'
      })
      const data = {
        Data:newarr
      }
      const res = await connrequest('SetParamDictURL', data)
      if (res.Status.StatusCode === 0){
        this.$message.success('保存成功')
        this.getData()
      }
    },
    flatten (tree, arr = []) {
      tree.forEach(item => {
        const {children, ...props} = item
        // 添加除了children的属性
        arr.push(props)
        if (children) {
          // 递归将所有节点加入到结果集中
          this.flatten(children, arr)
        }
      })
      return arr
    }
  },
};
</script>
<style lang="scss" scoped>
.table{
  width: 600px;
}
.top{
  padding-bottom: 20px;
}
</style>